<!-- 文章列表 -->
<template>
    <div class="sharelistBox">
        <div class="topbox">
                    <img src="../../static/img/laba.gif" height="100rem">
                    <span style="font-size: 1.5em; color: #ff0000;position:relative;top:-4rem"><Rolling/></span>
        </div>
        <el-col :md="7" :sm="24" class="s-item " v-for="(item, index) in articleList"
            :key="'article' + index">
            <header class="listtital">
                <p class="ellipsis" style="text-align: center;">
                    <router-link :to="'/DetailArticle?aid=' + item.id">
                        {{ item.title }}
                    </router-link>
                </p>
                <p class="ellipsis">
                    <i class="fa fa-fw fa-user"></i>发表于
                    <i class="fa fa-fw fa-clock-o"></i><span v-html="showInitDate(item.createTime, 'all')"></span> •
                    <i class="fa fa-fw fa-eye"></i>{{ item.viewCount }} 次围观 •
                </p>
                <div class="ui label">
                    <router-link :to="'/Share?classId=' + item.categoryId">{{ item.categoryName }}</router-link>
                </div>
            </header>
            <p style="font-size:0.8em;text-indent: 2em;margin: 1rem;" class="ellipsis">
                {{ item.summary }}
            </p>
            <div class="showimg">
                <el-image :src="item.thumbnail" alt="" class="maxW" lazy></el-image>
            </div>
        </el-col>
        <el-col class="viewmore">
            <a v-show="hasMore" class="tcolors-bg" href="javascript:void(0);" @click="addMoreFun">点击加载更多</a>
            <a v-show="!hasMore" class="tcolors-bg" href="javascript:void(0);">暂无更多数据</a>
        </el-col>

    </div>
</template>

<script>
import { initDate } from '../utils/server.js'
import { articleList } from '../api/article'
import Rolling from '@/components/rolling.vue'
export default {
    name: 'Share',
    data() { //选项 / 数据
        return {
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                categoryId: 0
            },
            articleList: [],
            hasMore: true
        }
    },

    methods: { //事件处理器
        showInitDate: function (oldDate, full) {
            return initDate(oldDate, full)
        },
        getList() {
            articleList(this.queryParams).then((response) => {
                this.articleList = this.articleList.concat(response.rows)
                if (response.total <= this.articleList.length) {
                    this.hasMore = false
                } else {
                    this.hasMore = true
                    this.queryParams.pageNum++
                }
            })
        },
        showSearchShowList: function (initData) {//展示数据
            if (initData) {
                this.articleList = []

            }
            this.getList()
        },
        addMoreFun: function () {//查看更多
            this.showSearchShowList(false);
        },
        routeChange: function () {
            var that = this;
            this.queryParams.categoryId = (that.$route.query.classId == undefined ? 0 : parseInt(that.$route.query.classId));//获取传参的classId
            this.showSearchShowList(true);
        }
    },
    components: { //定义组件
        Rolling
    },
    watch: {
        // 如果路由有变化，会再次执行该方法
        '$route': 'routeChange',
        '$store.state.keywords': 'routeChange',
    },
    created() { //生命周期函数
        // console.log(this.$route);
        var that = this;
        that.routeChange();
    }
}
</script>

<style>
.article-content {
    height: 60%;
}

.showimg {
    height: 12rem;
    overflow: hidden;
    margin: 0 0;
}

.listtital:nth-child(1) {
    font-size: 1.5em !important;
    font-weight: bold;
    margin: 10px;
}

.listtital p:nth-child(2) {
    font-size: 0.5em !important;
    color: #8a8a8a !important;
    font-weight: normal;
    font-style: italic;
    text-align: center;
    margin: 10px;
    background-color: #fff;
}
.s-item{
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    position: relative;
    background: #fff;
    padding: 0 !important;
    border-radius: 5px;
    height: auto;
    margin: 18px;
    font-size: 15px;
    overflow: hidden;
    border-radius: 20px 20px;
}
.ellipsis {
    max-width: 100%;
    /* 防止文本换行 */
    white-space: nowrap;
    /* 隐藏超出的部分 */
    overflow: hidden;
    /* 当文本溢出时显示省略号 */
    text-overflow: ellipsis;
}

.topbox {
    width: 98%;
    height: 7rem;
    border: 2px dotted #e4baba;
    border-radius: 10px;
    margin-bottom: 0.7rem;
}

.maxW:hover {
    transform: scale(1.2);
    transition: all 0.5s ease-out;
}

.maxW {
    transform: scale(1);
    transition: all 0.5s ease-out;
}

/*分享标题*/
.shareTitle {
    margin-bottom: 40px;
    position: relative;
    border-radius: 5px;
    background: #fff;
    padding: 15px;
}

.shareclassTwo {
    width: 100%;
}

.shareclassTwo li {
    display: inline-block;
}

.shareclassTwo li a {
    display: inline-block;
    padding: 3px 7px;
    margin: 5px 10px;
    color: #fff;
    border-radius: 4px;
    background: #64609E;
    border: 1px solid #64609E;
    transition: transform 0.2s linear;
    -webkit-transition: transform 0.2s linear;
}

.shareclassTwo li a:hover {
    transform: translate(0, -3px);
    -webkit-transform: translate(0, -3px);
}

.shareclassTwo li a.active {
    background: #fff;
    color: #64609E;

}

/*文章列表*/
.sharelistBox {
    transition: all 0.5s ease-out;
    font-size: 15px;
}
.viewmore{
    margin-bottom: 10vh;
}

</style>
